﻿<script type="text/template" id="basicrole-template">
    <el-container class="page-container p20">
        <el-header height="auto">
            <div class="tools-box">
                <div class="tools-box-buttons">
                    @Exhort.Backstage.Components.WorkControls.PageButtons(this)
                </div>
            </div>
        </el-header>
        <el-main class="table-box">
            <el-table height="100%" ref="table" :data="rows" row-key="ID" v-on:row-click="clickRow" border>
                <el-table-column label="选择" width="60" align="center">
                    <template slot-scope="scope">
                        <el-radio class="table-row-radio" v-model="currentRow" :label="scope.row"><i /></el-radio>
                    </template>
                </el-table-column>
                <el-table-column prop="Sequence" label="排序" width="80" align="center"></el-table-column>
                <el-table-column prop="Title" label="标题" width="180" align="center"></el-table-column>
                <el-table-column prop="IsEnabled" label="启用" width="80" align="center">
                    <template slot-scope="scope">
                        <i v-if="scope.row.IsEnabled" class="el-icon-circle-check color-success"></i>
                        <i v-else class="el-icon-remove-outline color-danger"></i>
                    </template>
                </el-table-column>
                <el-table-column prop="Remark" label="描述"></el-table-column>
            </el-table>
        </el-main>
        <el-footer class="pagination-box" height="auto">
            <el-pagination :current-page.sync="currentPage" :page-size.sync="pageSize" :total="total" v-on:size-change="loadList" v-on:current-change="loadList" background></el-pagination>
        </el-footer>
        <el-dialog ref="dialog" :title="model.ID?'修改':'新增'" :visible.sync="dialogVisible" :close-on-click-modal="false" width="500px">
            <el-form ref="form" :rules="rules" :model="model" label-width="80px">
                <el-form-item prop="Title" label="角色名称">
                    <el-input v-model="model.Title"></el-input>
                </el-form-item>
                <el-form-item prop="IsEnabled" label="是否启用">
                    <el-switch v-model="model.IsEnabled"></el-switch>
                </el-form-item>
                <el-form-item prop="Remark" label="角色描述">
                    <el-input v-model="model.Remark" :rows="3" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-on:click="dialogVisible=false">关闭</el-button>
                <el-button type="primary" v-on:click="submitForm">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog ref="power" title="权限设置" :visible.sync="powerVisible" :close-on-click-modal="false" fullscreen>
            <el-table height="100%" ref="powerTable" row-key="id" :data="powerData" default-expand-all border>
                <el-table-column prop="title" label="菜单" width="200"></el-table-column>
                <el-table-column label="权限">
                    <template slot-scope="scope">
                        <el-checkbox v-for="item in scope.row.powerlist" :key="item.id"
                                     v-model="item.exist" class="power-row-check">
                            <i :class="item.icon">{{item.title}}</i>
                        </el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="160" align="center">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-plus" size="mini" type="primary" v-on:click="powerCheckRow(scope.row,true)"></el-button>
                        <el-button icon="el-icon-minus" size="mini" type="danger" v-on:click="powerCheckRow(scope.row,false)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button v-on:click="powerVisible=false">关闭</el-button>
                <el-button type="primary" v-on:click="setPower">确定</el-button>
            </div>
        </el-dialog>
    </el-container>
</script>
<script type="text/javascript">
    var basicrole = {
        template: "#basicrole-template",
        data: function () {
            return {
                listQuery: { page: 1, rows: 20 },
                rows: [],
                total: 0,
                currentRow: null,
                model: {
                    ID: "",
                    Title: "",
                    IsEnabled: true,
                    Remark: ""
                },
                powerData: [],
                powerVisible: false,
                rules: {
                    Title: [{ required: true, message: "请填写功能标题", trigger: "blur" }]
                },
                dialogVisible: false
            }
        },
        computed: {
            currentPage: {
                get() { return this.listQuery.page; },
                set(val) { this.listQuery.page = val; }
            },
            pageSize: {
                get() { return this.listQuery.rows; },
                set(val) { this.listQuery.rows = val; }
            }
        },
        methods: {
            loadList: function () {
                var that = this;
                workVue.ajax({
                    url: "/basic/role/grid",
                    data: that.listQuery,
                    target: that.$el,
                    success: function (result) {
                        that.rows = result.data.rows;
                        that.total = result.data.total;
                    }
                });
                that.currentRow = null;
            },
            clickRow: function (row) {
                this.currentRow = row;
            },
            resetModel: function () {
                this.model = {
                    ID: "",
                    Title: "",
                    IsEnabled: true,
                    Remark: ""
                };
            },
            insert: function () {
                var that = this;
                that.resetModel();
                if (that.$refs.form) {
                    that.$refs.form.clearValidate();
                }
                that.dialogVisible = true;
            },
            update: function () {
                var that = this;
                if (that.currentRow) {
                    that.insert();
                    workVue.ajax({
                        url: "/basic/role/get",
                        data: { id: that.currentRow.ID },
                        target: that.$refs.dialog.$el,
                        success: function (result) {
                            that.model = result.data;
                        }
                    });
                }
                else { that.$message.warning("请选择操作行"); }
            },
            submitForm: function () {
                var that = this;
                that.$refs.form.validate((valid) => {
                    if (valid) {
                        workVue.ajax({
                            url: "/basic/role/save",
                            type: "post",
                            data: { model: that.model },
                            target: that.$refs.dialog.$el,
                            success: function (result) {
                                that.loadList();
                                that.dialogVisible = false;
                                that.$message.success(result.message);
                            }
                        });
                    }
                });
            },
            remove: function () {
                var that = this;
                if (that.currentRow) {
                    that.$confirm("删除数据后将不可恢复，是否继续？", "提示", {
                        type: "warning"
                    }).then(() => {
                        workVue.ajax({
                            url: "/basic/role/remove",
                            type: "post",
                            data: { id: that.currentRow.ID },
                            target: that.$el,
                            success: function (result) {
                                that.loadList();
                                that.$message.success(result.message);
                            }
                        });
                    }).catch(() => { });
                }
                else { that.$message.warning("请选择操作行"); }
            },
            order: function (order) {
                var that = this;
                if (that.currentRow) {
                    workVue.ajax({
                        url: "/basic/role/setorder",
                        type: "post",
                        data: { id: that.currentRow.ID, order: order },
                        target: that.$el,
                        success: function (result) {
                            that.loadList();
                            that.$message.success(result.message);
                        }
                    });
                }
                else { that.$message.warning("请选择操作行"); }
            },
            reload: function () {
                this.loadList();
            },
            power: function () {
                var that = this;
                if (that.currentRow) {
                    that.powerData = [];
                    that.powerVisible = true;
                    workVue.ajax({
                        url: "/basic/role/powergrid",
                        data: { id: that.currentRow.ID },
                        target: that.$refs.power.$el,
                        success: function (result) {
                            that.powerData = result.data;
                        }
                    });
                }
                else { that.$message.warning("请选择操作行"); }
            },
            powerCheckRow: function (row, bit) {
                for (var mf of row.powerlist) {
                    mf.exist = bit;
                }
            },
            setPower: function () {
                var that = this;
                var pushList = function (items) {
                    var list = [];
                    for (var item of items) {
                        for (var mf of item.powerlist) {
                            if (mf.exist) { list.push(mf.id); }
                        }
                        if (item.children) {
                            list = list.concat(pushList(item.children));
                        }
                    }
                    return list;
                };
                workVue.ajax({
                    url: "/basic/role/setpower",
                    type: "post",
                    data: {
                        id: that.currentRow.ID,
                        list: pushList(that.powerData),
                    },
                    target: that.$refs.power.$el,
                    success: function (result) {
                        that.powerVisible = false;
                        that.$message.success(result.message);
                    }
                });
            },
            enable: function (bit) {
                var that = this;
                if (that.currentRow) {
                    workVue.ajax({
                        url: "/basic/role/enable",
                        type: "post",
                        data: { id: that.currentRow.ID, bit: bit, },
                        target: that.$el,
                        success: function (result) {
                            that.loadList();
                            that.$message.success(result.message);
                        }
                    });
                }
                else { that.$message.warning("请选择操作行"); }
            }
        },
        mounted: function () {
            this.loadList();
        }
    }
</script>